<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script>
    // 宽度 window.innerWidth
    // html 元素 document.documentElement
    // font-size style.fontSize
    // 匿名函数
    // (function() {
    //     // console.log('动态设置一下html的字体大小');
    //     let winWidth = window.innerWidth,
    //         oHTML = document.documentElement;
    //     // console.log(winWidth, oHTML);
    //     oHTML.style.fontSize = `${winWidth / 10}px`;
    //     // 动态设置一下html的字体大小
    // })()
    </script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul, li {
        list-style: none;
    }

    body {
        --tm-PRICE-TEXT-COLOR: #ee0a36;
    }
    
    /* .row {
        display: flex;
    }
    .col {
        background-color: pink;
    }
    .col:first-child {
        background-color: green;
    }
    .col-1 { width: 1rem;}
    .col-2 { width: 2rem;}  
    .col-3 { width: 3rem;} 
    .col-4 { width: 4rem;} 
    .col-5 { width: 5rem;}
    .col-6 { width: 6rem;}  
    .col-7 { width: 7rem;}
    .col-8 { width: 8rem;}
    .col-9 { width: 9rem;} */
    .page__hd img {
        width: 10rem;
    }
    ul.goods {
        padding: 0.133333rem;

    }
    .goods__item {
        display: table;
    }
    .goods__item > .goods__figure,  
    .goods__item > .goods__figcaption {
        display: table-cell;
        padding: 0.16rem 0;
        vertical-align: top;
        background-color: #fff;
    }
    .goods__figure {
        width: 2.4rem;
        height: 2.4rem;
    }
    .goods__figure > img {
        max-width: 100%;
    }
    .goods__item .goods__figcaption {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        position: relative;
    }
    .goods__figcaption .goods__title a {
        color: #333;
        line-height: 1.25;
    }
    .goods__figcaption .goods__price {
        padding: 0.15rem 0 0.2rem;
    }
    .goods__figcaption .goods__price small, 
    .goods__figcaption .goods__price span,
    .goods__figcaption .goods__price strong
    {
        display: inline-block;
        vertical-align: middle;
    }
    .goods__figcaption .goods__price span {
        font-size: 11px;
        background-color: #ee0a36;
        border-radius: .026667rem;
        padding: .026667rem .08rem .013333rem;
        color: #fff;
        font-weight: 700;
        margin-right: 0.0667rem;
    }
    .goods__figcaption .goods__price strong {
        font-weight: 700;
        color: #ee0a3b;
        font-size: 16px;
        margin-right: 0.16rem;
    }
    .goods__figcaption .goods__price small {
        font-weight: 700;
        color: #ee0a3b;
        font-size: 12px;
    }

    .good__type{
            color: #ff3699;
        }

        .goods__btn{
            font-size: 14px;
            position: absolute;
            width: 2.13333rem;
            height: 0.64rem;
            background-color: #ee0a3b;
            text-align: center;
            color: #fff;
            font-weight: 700;
            bottom: 0.1333rem;
            right: 0.2rem;
            border-radius: 0.0267rem;
        }
    </style>
</head>
<body>

<!-- <div class="row">
    <div class="col col-3">1</div>
    <div class="col col-7">2</div>
</div>
<div class="row">
    <div class="col col-4">3</div>
    <div class="col col-6">4</div>
</div> -->
<div class="page">
    <div class="page__hd">
        <h2>
            <img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt="">
        </h2>
    </div>
    <div class="page__bd">
        <ul class="goods">
          
        </ul>
    </div>
</div>
<script>
    const goods=[
        {
        "id":"558133890404",
        "pic":"	https://img.alicdn.com/imgextra/i2/2967431004/O1CN…LPo01JHsDesOMIc_!!2967431004.jpg_640x640q80_.webp",
        "title":"6只装 八角玻璃厚实水杯果汁杯大容量470ML 家用 KTV 酒吧啤酒杯",
        "price":"20.9",
        "count":"400+"
        },
        {
            "id":"616602916456",
            "pic": "https://img.alicdn.com/bao/uploaded/i2/2200877014436/O1CN01iCkQ9K1idjXHp7h8g_!!2200877014436.jpg",
            "title": "Lancome/兰蔻法国⼝红菁纯哑光唇膏196胡萝⼘⾊505苹果红润唇膏",
            "price": "239",
            "count": "2000+"
        },
        {
            "id":"641565544185",
            "pic": "https://img.alicdn.com/bao/uploaded/i4/1689187437/O1CN01LFwBH024oCDG9vm9E_!!1689187437.jpg_560x840Q50s50.jpg_.webp",
            "title": "鳄⻥男鞋夏季真⽪厚底镂空透⽓防臭软底商务正装德⽐鞋休闲⽪鞋男",
            "price": "158",
            "count": "1000"
        },
        {
            "id":"616602916456",
            "pic": "https://img.alicdn.com/bao/uploaded/i2/2200877014436/O1CN01iCkQ9K1idjXHp7h8g_!!2200877014436.jpg",
            "title": "Lancome/兰蔻法国⼝红菁纯哑光唇膏196胡萝⼘⾊505苹果红润唇膏",
            "price": "239",
            "count": "2000+"
        },

    ]

const goodsEle = document.querySelector('.goods');
for (let i = 0; i<goods.length; i++){
    let item = goods[i];goodsEle.innerHTML += `
    <li class="goods__item">
                <a href="#" class="goods__figure ">
                    <img src="${item.pic}" alt="">
                </a>
                <div class="goods__figcaption">
                    <div class="goods__title">
                        <a href="#">${item.title}</a>
                    </div>
                    <div class="goods__price">
                        <span>双11价</span>
                        <strong>${item.price}</strong>
                        <small>(满400减100)</small>
                    </div>
                    <div class="goods__type">
                        1小时内热卖${item.count}件
                    </div>
                    <a href="#" class="goods__btn">马上抢</a>
                </div>
            </li>
    `
}


</script>
</body>
</html>
